<template>
  <div class="my-delivery-goods">
    <div class="tabbar">
      <tabs v-model="active" color="#283C79" swipe-threshold="5">
        <tab title="纸尿裤"></tab>
        <tab title="拉拉裤"></tab>
        <tab title="时尚裤"></tab>
        <tab title="洗护"></tab>
        <tab title="其他"></tab>
      </tabs>
    </div>

    <div class="products-list">
      <div class="item">
        <product-item>
          <div class="product-info" slot="product-item">
            <div class="name">TIMELESS时光番茄口服美白丸 3片 * 10粒</div>
            <div class="p-info">
              <p class="price">
                <span>￥78.00</span>
                <span>￥128.00</span>
              </p>
              <p class="status">
                <span>库存：999组</span>
                <!-- <span class="sign">已售罄</span> -->
              </p>
            </div>

            <div class="num">
              <stepper v-model="value" button-size="22px"/>
            </div>
          </div>
        </product-item>
      </div>
    </div>
  </div>
</template>

<script>
import { Tab, Tabs, Stepper } from "vant";
import productItem from "../components/product_item.vue";

export default {
  components: {
    Tab,
    Tabs,
    productItem,
    Stepper
  },
  data() {
    return {
      active: 0,
      value: 0,
    };
  }
};
</script>

<style scoped>
.products-list{
  margin-top: 5px;
}

.item{
  padding: 10px 10px 0 10px;
  background-color: #fff;
}

.p-info{
  display: flex;
  justify-content: space-between;
}

.price span:first-child {
  color: var(--money-up);
}

.price span:last-child {
  font-size: 0.9rem;
  text-decoration: line-through;
  padding-left: 10px;
}

.status .sign{
  background-color: #BEBEBE;
  color: #fff;
  font-size: 0.9rem;
  padding: 0 5px;
  border-radius: 3px;
}

.num{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>